<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>jsonp</h1>
  <button id="btn">发送jsonp请求</button>
  <script>
    
    function callback(data) {
      console.log('callBack', data)
    }

    const oBtn = document.getElementById('btn');
    // 创建一个空标签 给下面判断用
    let oScript = null;
    //通过script标签来进行跨域请求
    // 可以点击发送时把url包裹在script标签中进行跨域
    //创建一个
    oBtn.onclick = function () {
        // 判断如果有oScript标签，则进入清除
      if (oScript) {
        // document.body.removeChild(oScript);
        // 删除某个元素，可以直接用元素.remove方法删除自身
        //这里因为多次请求会重复创建，每次点击时删除上一次创建标签
        oScript.remove();
      }
    //   由于上面判断要调用，所以可以先声明在全局，然后再进行判断，再赋值
      oScript = document.createElement("script");
      //把请求的数据放到src属性上
      oScript.src = "http://127.0.0.1:3000/getUser?userId=001&cb=callback";
      //添加到body中
      document.body.appendChild(oScript)
    }
  </script>
</body>
</html>